<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<p>-----------------</p>
<div id="app1"></div>
</body>
<script src="js/vue.js"></script>
<script>

    /* Mixin
       1. 当 Mixin 与 实例中都存在对应的属性时，实例中的属性优先级高于 mixin 中的属性
       2. 当 mixin 中存在实例中不存在的属性时，实例中的属性会与 mixin 中的属性叠加
       3. 生命周期函数，mixin 中的先执行，实例中的后执行
    */
    const Mixin = {
        data() {
            return {
                msg: "Mixin 初体验",
                list: ['Tim', 'Jim', 'Tom', 'Ben', 'Jack', 'John', 'Nike'],
            }
        },
        methods: {
            hello() {
                console.log("hello");
            }
        },
        mounted(){
            console.log("-----------mixin  mounted ----------");
        }
    };

    /* 测试存在和 mixin 中不一样的数据 */
    const app = Vue.createApp({
        mixins:[Mixin], // 这里接受的是一个数组
        data(){
            return {
                title: 'mixin 属性叠加'
            }
        },
        methods: {
            tap(){
                console.log("实例中的方法");
            }
        },
        template: `
          <div>
          <h3>{{ msg }}</h3>
          <h5>{{ title }}</h5>
          <button @click="hello">点击</button>
          <button @click="tap">点击实例中的方法</button>
          </div>
        `,
        mounted(){
            console.log("-----------实例中1  mounted ----------");
        }
    }).mount("#app");


</script>
</html>
